<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <span>人员编辑</span>
            <div style="float: right">
                <el-button-group>
                    <el-button type="primary" size="small" @click="getUsers()">刷新</el-button>
                    <el-button type="primary" size="small" @click="addUserDialog = true">添加人员</el-button>
                </el-button-group>
            </div>
            

            <el-dialog title="添加用户" v-model="addUserDialog">
                <el-form :model="addUserInfo" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                    <el-form-item label="登录名" size="small">
                        <el-input v-model="addUserInfo.user_name" size="small" @blur="checkUserNameExitsFromServer()"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" size="small">
                        <el-input v-model="addUserInfo.name" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="用户角色" size="small">
                        <el-select v-model="addUserInfo.role" placeholder="">
                            <el-option 
                                key="0"
                                label="管理员"
                                value="0">
                            </el-option>
                            <el-option 
                                key="1"
                                label="SEO"
                                value="1">
                            </el-option>
                            <el-option 
                                key="2"
                                label="作者"
                                value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item size="small">
                        <el-checkbox v-model="addUserInfo.is_lock" :indeterminate="false">锁定</el-checkbox>
                        <el-checkbox v-model="addUserInfo.is_super" :indeterminate="false">超级用户</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addUserOnSubmit()">立即创建</el-button>
                        <el-button @click="addUserDialog = false">取消</el-button>
                    </el-form-item>
                </el-form>
                
            </el-dialog>
        </template>
        <!-- card body -->
        <router-view></router-view>
    </el-card>
    
    
</template>

<script >
import { adminUser } from '@/api/content.js'
import { mapMutations } from 'vuex'

export default {
    name: 'User',
    data(){
        return {
            addUserDialog: false,
            addUserInfo: {
                user_name: '',
                name: '',
                is_super: 0,
                is_lock: 0,
                pwd: '',
            },
        }
    },
    methods: {
        ...mapMutations('au', [
            'pushUser',
            'getUsers',
        ]),
        async addUserOnSubmit(){
            if(this.addUserInfo.user_name == "" || this.addUserInfo.user_name == undefined){
                this.$message({
                    showClose: true,
                    message: '用户添加失败',
                    type: 'error'
                })
                return;
            }
            if(this.checkUserNameExitsFromServer()){
                let res = await adminUser.addUser(this.addUserInfo)
                if(res.status){
                    this.$message({
                        showClose: true,
                        message: '用户添加成功',
                        type: 'success'
                    })
                    this.pushUser(res.user)
                }else{
                    this.$message({
                        showClose: true,
                        message: '用户添加失败',
                        type: 'error'
                    })
                }
            }
            this.addUserDialog = false;
        },
        async checkUserNameExitsFromServer(){
            if(this.addUserInfo.user_name == "" || this.addUserInfo.user_name == undefined)return;
            let data = await adminUser.checkUserNameExits(this.addUserInfo.user_name);
            if(data.is_exits){
                this.$message({
                    showClose: true,
                    message: '用户已存在',
                    type: 'error'
                })
                return false
            }
            return true;
        },

    }
}
</script>
<style lang="scss" scoped>
deep() .el-card {
    min-height: 600px;
    .el-popover {
        z-index: 1000;
    }
}
</style>